@import "common/_functions.scss";

.manual-list-container {
    width: 100%;
    height: 100%;
    color: #666666;
    overflow: auto;

    border: 0px solid black;
    position: relative;
    box-sizing: border-box;
    display: flex;
    -webkit-box-orient: horizontal;
    flex-direction: row;
    align-content: flex-start;
    flex: 1 1 0%;
    -webkit-box-flex: 1;
    background-color: rgb(242, 242, 242);
    overflow: hidden;

    .tab-nav {
        border: 0px solid black;
        position: relative;
        box-sizing: border-box;
        display: flex;
        -webkit-box-orient: vertical;
        flex-direction: column;
        align-content: flex-start;
        flex-shrink: 0;
        width: rem(202);
        overflow: scroll;
        font-size: 14px;

        .tab-nav-item {
            border: 0px solid black;
            position: relative;
            box-sizing: border-box;
            display: flex;
            -webkit-box-orient: horizontal;
            flex-direction: row;
            place-content: flex-start center;
            flex-shrink: 0;
            cursor: pointer;
            height: rem(108);
            overflow: hidden;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            align-items: center;
            z-index: 3;
            background-color: #f2f2f2;
            border-bottom: 1px solid rgba(245,245,245,1);
        }

        .tab-active {
            color: #D8222A;
            background:rgba(255,255,255,1);

            .tab-nav-item-icon {
                border: 0px solid black;
                position: absolute;
                box-sizing: border-box;
                display: flex;
                -webkit-box-orient: vertical;
                flex-direction: column;
                align-content: flex-start;
                flex-shrink: 0;
                height: 20px;
                width: 4px;
                background:rgba(216,34,42,1);
                border-radius: 55.2px;
                top: rem(34);
                left: 0px;
                z-index: 3;
            }
        }
    }

    .tab-panel {
        border: 0px solid black;
        position: relative;
        box-sizing: border-box;
        display: flex;
        -webkit-box-orient: vertical;
        flex-direction: column;
        align-content: flex-start;
        flex: 1 1 0%;
        -webkit-box-flex: 1;
        overflow: scroll;
        padding: rem(20) rem(20) 0 rem(22);
        background-color: #ffffff;
        overflow: auto;

        .tab-panel-item {
            width: rem(506);
            height: rem(158);
            background:rgba(245,245,245,1);
            border-radius:5px;
            display: flex;
            margin-bottom: rem(16);

            .img-box {
                width: rem(120);
                height: rem(120);
                margin: rem(18) rem(14) rem(20) rem(18);
                img {
                    width: rem(120);
                    height: rem(120); 
                }
            }
            .text-content {
                margin: rem(18) rem(44) rem(18) 0px;
                .text-title {
                    font-size: 14px;
                    width: rem(310);
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                }
                .text-date {
                    margin-top: rem(48);
                    font-size: 12px;
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                }
            }
        }
    }
}